<template>
    <fieldset>
        <legend>todolist</legend>
        <todoinput @add="addtodo"></todoinput>
        <todolist :data="newData" @del="deltodo" @getflag="handlegetFalg" :activeCount="activeCount" :completedCount="completedCount" :allCount="allCount"></todolist>
    </fieldset>
</template>
<script setup>
    import todoinput from "./todoinput.vue"
    import  todolist from "./todolist.vue"
    import {ref ,computed} from "vue"
    let data = ref([
        {
            id:1,
            todo:"zzz",
            isCompleted:false
        },
        {
            id:2,
            todo:"kkk",
            isCompleted:false
        },
    ])
    let addtodo = (input)=>{
        console.log(input);
        let obj = {
            id:Math.random().toString(32).substring(2),
            todo:input,
            isCompleted:false
        }
        data.value.push(obj)
    }

    let deltodo = (input)=>{
        console.log(input);
        data.value.splice(input,1)
    }

        let filterFlag = ref('all')
        let handlegetFalg = (flag)=>{
            console.log(flag);
            filterFlag.value =flag
        }
   

        let allCount = ref(0)
        let completedCount = ref(0)
        let activeCount = ref(0)
   let newData = computed(()=>{

        let all = data.value
        let completed = data.value.filter(item=>item.isCompleted)
        let active = data.value.filter(item=>!item.isCompleted)

        allCount.value = all.length
        completedCount.value = completed.length
        activeCount.value = active.length


        console.log(filterFlag.value);
        switch(filterFlag.value){
            case "all":
                return all
                case "completed":
                    return completed
                    case "active":
                        return active
        }
   })
</script>